<template>
		<view class="tabbar">
			<view class="item" v-for="(item,index) in list" :key="item.text"  @click="tabChange(index)">
				<image class="itemImage" :src="item.iconPath" mode="" v-if="selectIndex!=index"></image>
				<image class="itemImage" :src="item.selectedIconPath" mode="" v-if="selectIndex==index"></image>
				<view class="text" :class="[selectIndex==index?'select':'']">
					{{item.text}}
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		props:{
			tabIndex:{
				type:Number,
				default:''
			}
		},
		data() {
			return {
				list: [{
						"text": "首页",
						"iconPath": 'http://47.107.81.81/chuyujing/upload/images/tab_icon_home_nor.png',
						"selectedIconPath": 'http://47.107.81.81/chuyujing/upload/images/tab_icon_home_sel.png'
					},
					{
						"text": "商城",
						"iconPath": 'http://47.107.81.81/chuyujing/upload/images/tab_icon_store_nor.png',
						"selectedIconPath": 'http://47.107.81.81/chuyujing/upload/images/tab_icon_store_sel.png'
					},
					{
						"text": "购物车",
						"iconPath": 'http://47.107.81.81/chuyujing/upload/images/tab_icon_car_nor.png',
						"selectedIconPath": 'http://47.107.81.81/chuyujing/upload/images/tab_icon_car_sel.png'
					},
					{
						"text": "我的",
						"iconPath": 'http://47.107.81.81/chuyujing/upload/images/tab_icon_me_nor.png',
						"selectedIconPath": 'http://47.107.81.81/chuyujing/upload/images/tab_icon_me_sel.png'
					}
				],
				
				selectIndex:this.tabIndex
			};
		},
		
		methods:{
			tabChange(index){
				if(index==0&&this.selectIndex!=0){
					this.selectIndex=0
					uni.redirectTo({
						url:"/pages/index/index"
					})
				}else if(index==1&&this.selectIndex!=1){
					this.selectIndex=1
					uni.redirectTo({
						url:"/pages/shops/shops"
					})
				}else if(index==2&&this.selectIndex!=2){
					this.selectIndex=2
					uni.redirectTo({
						url:"/pages/cart/cart"
					})
				}else if(index==3&&this.selectIndex!=3){
					this.selectIndex=3
					uni.redirectTo({
						url:"/pages/my/my"
					})
				}
			}
		}
	}
</script>

<style lang="less">
.tabbar{
	width: 750rpx;
	height: 98rpx;
	position: fixed;
	bottom: 0rpx;
	left: 0rpx;
	display: flex;
	align-items: center;
	background-color: white;
	box-shadow: 0rpx 0rpx 1rpx 0rpx #CCCCCC;
	
	.item{
		width: 25%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		.itemImage{
			width: 46rpx;
			height: 48rpx;
		}
		.text{
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
		}
		.select{
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #0089E2;
		}
	}
}
</style>
